<template>
    <div class="panel">
        <div v-show="!addOrUpdateVisible">
            <el-form :inline="true" :model="dataForm">
                <el-form-item v-show="!selectMode">
                    <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary"
                               @click="addOrUpdateHandle()">新增
                    </el-button>
                    <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="getMaterNews(1)">刷新
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="flex justify-start" v-loading="dataListLoading">
                <div
                    class="margin-xs"
                    v-for="item in news.items"
                    @click="onSelect(item)"
                    :style="{width:100/rows + '%'}"
                    style="border:1px solid #efefef;border-radius: 5px;"
                >
                    <div class="card-preview"
                         v-for="(article,k) in item.content.articles"
                         @click="openPreview(article.url)"
                    >
                        <div v-if="k === 0" style="position: relative;">
                            <el-image
                                class="article-thumb"
                                fit="contain"
                                :src="article.thumbUrl"
                                style="height: 124px"
                            />
                            <label class="padding-xs width-100 position-absolute"
                                   style="
                                   display:block;
                                   position: absolute;
                                   bottom: 0;
                                   width: 100%;
                                   background-image: linear-gradient(rgba(245,245,245,.2),rgba(185,185,185,.6));
                                   color: #fff;"
                            >{{article.title}}</label>
                        </div>
                        <div class="flex padding-xs" v-else style="border-bottom: 1px solid #efefef">
                            <label class="flex-sub" style="vertical-align: center;">{{ article.title }}</label>
                            <el-image
                                class="article-thumb"
                                v-if="article.thumbUrl"
                                :src="article.thumbUrl"
                                style="width: 40px"/>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div>{{ $moment(item.updateTime).calendar() }}</div>
                        <div class="flex justify-between align-center" v-show="!selectMode">
                            <el-tooltip
                                content="编辑"
                            >
                                <el-button size="mini" icon="el-icon-edit" @click="addOrUpdateHandle(item)"/>
                            </el-tooltip>
                            <el-tooltip
                                content="删除"
                            >
                                <el-button size="mini" icon="el-icon-delete" @click="deleteHandle(item.mediaId)"/>
                            </el-tooltip>
                            <el-tooltip
                                content="群发"
                            >
                                <el-button size="mini" icon="el-icon-position" @click.stop="sendHandle(item.mediaId)"/>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <el-pagination
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-size="pageSize"
                :total="totalCount"
                layout="total, prev,pager, next, jumper"/>
        </div>
        <!-- 新增 / 修改 -->
        <add-or-update
            :visible="addOrUpdateVisible"
            ref="addOrUpdate"
            @refreshDataList="onChange"
            @hide="addOrUpdateVisible=false"/>
    </div>
</template>
<script>
    import AddOrUpdate from './mteNewEditDialog'
    import {mapState, mapActions, mapMutations} from 'vuex'
    import {sendMassText} from "../../../api/wx";

    export default {
        name: 'material-news',
        components: {
            AddOrUpdate
        },
        props: {
            selectMode: {// 是否选择模式，选择模式下点击素材选中，不可新增和删除
                type: Boolean,
                default: false
            },
            // 每行显示的item数量
            rows: {
                type: Number,
                default: 4
            }
        },
        data() {
            return {
                dataForm: {},
                addOrUpdateVisible: false,
                pageIndex: 1,
                pageSize: 20,
                totalCount: 0,
                dataListLoading: false,
                massDialogVisible: false,// 群发弹窗显示状态
            }
        },
        computed: {
            ...mapState({
                news: state => state.mater.materData.news
            })
        },
        methods: {
            ...mapActions({
                getMaterNews: 'getMaterDataNews'
            }),
            ...mapMutations({
                getInitMater: 'getInitMater'
            }),
            init() {
                this.getInitMater()
                if (!this.news || !this.news.items) {
                    this.getMaterNews(1)
                } else if (this.news) {
                    this.getInitMater()
                }
            },
            openPreview(url) {
                console.log("点击后的预览地址", url)
                window.open(url, '_blank')
            },
            onSelect(itemInfo) {
                if (!this.selectMode) return
                this.$emit('selected', itemInfo)
            },
            //删除
            deleteHandle(id) {
                this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
                        method: 'post',
                        data: {mediaId: id}
                    }).then(({data}) => {
                        if (data && data.code === 200) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => this.onChange()
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                })
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList(1)
            },
            // 新增 / 修改
            addOrUpdateHandle(news) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(news || '')
                })
            },
            onChange() {
                this.getMaterNews(1)
                this.$emit('change')
            },
            // 群发按钮点击事件
            sendHandle(newId) {
                this.dataListLoading = true
                let params = {
                    mediaId: newId,
                    openids: ["on-Zq5_Eumjvrn8HR56KMQ3cypCI", "on-Zq5zxMa_v-RSqzAQDkbe1C8E8"].join(','),
                    type: 'mpnews'
                }
                sendMassText(params).then(({data}) => {
                    if (data.code === 200) {
                        this.$message.success('消息群发成功')
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                    .finally(() => {
                        this.dataListLoading = false
                    })
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
<style scoped lang="less">
</style>